<template>
	<view class="pay-errors">
		<uni-card v-for="(item, index) in errorList" :key="index" @click="goToDetail(item)">
			<view slot="title" class="card-titles">
				<p class="time">异常单号【{{item.billid}}】</p>
				<uni-tag v-if="item.flowFlag > 2" class="float-right" :circle="true" :text="'可退款'" type="success" size="mini" />
				<div class="clearfix"></div>
			</view>
			<view class="uni-body">
				<p>患者姓名：{{item.itemData.PatientName}}</p>
				<p>开单科室：{{item.itemData.Department}}</p>
				<p>开单医生：{{item.itemData.Doctor}}</p>
				<p>支付金额：{{item.money}}</p>
				<p>流程节点：{{flowFlag(item.flowFlag)}}</p>
				<p>支付单号：{{item.id}}</p>
			</view>
			
		</uni-card>
		
		<u-empty v-if="errorList.length == 0" mode="list" text="找不到缴费异常信息" icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
	</view>
</template>

<script>
	import _ from 'lodash'
	export default {
		data() {
			return {
				errorList: []
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.loadErrorList()
		},
		methods: {
			loadErrorList() {
				if (uni.getStorageSync('payFlows')) {
					this.errorList = uni.getStorageSync('payFlows')
					this.errorList = _.reject(this.errorList, {flowFlag: 5})
				}
			},
			flowFlag(flag) {
				if (flag == 1) {
					return '发起订单'
				}else if (flag == 2) {
					return '发起支付，但未支付'
				}else if (flag == 3) {
					return '已支付金额'
				}else if (flag == 4) {
					return '支付完成更新订单状态'
				}else if (flag == 5) {
					return '完成缴费并下单'
				}
			},
			goToDetail(item) {
				uni.navigateTo({
					url: '/pages/tabbar/myCenter/payErrorDetail',
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('detail', {
							data: item
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.pay-errors {
		padding-bottom: 10px;
		
		.time {
			color: #f44336;
			float: left;
		}
		
		.card-titles {
			border-bottom: 1px #EBEEF5 solid;
			padding: 10px;
		}
		
		.card-actions {
			border-top: 1px #EBEEF5 solid;
			padding: 10px;
			color: #616161;
		}
		
		.current-user-card {
			width: 100%;
			line-height: 40px;
			padding: 5px 10px 5px 10px;
			color: #fff;
			font-size: .8rem;
			background-image: linear-gradient(to right, #41C177, #c8e6c9);
			box-sizing: border-box;
			border-radius: 6px;
			margin-bottom: 5px;
		}
	}
</style>